/* eslint-disable array-callback-return */
import React from 'react';
import { DownOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, Spin, Card, Divider, Menu, Dropdown, Table, Modal, message, Alert } from 'antd';
import { connect } from 'dva';

import DescriptionList from '@/components/DescriptionList';
import AddDetailUpdateInv from './AddDetailUpdateInv';
import styles from '@/utils/utils.less';

const { confirm } = Modal;
const { Description } = DescriptionList;

@connect(({ invbycustsupp, loading }) => ({
  loading: loading.models.invbycustsupp,
  recordData: invbycustsupp.recordData,
  formFieldsValue: invbycustsupp.formFieldsValue, // form值
  expensesData: invbycustsupp.expensesData, // 费用明细
}))
@Form.create()
class BillingList extends React.Component {
  state = {
    visible: false,
    invDetailType: null,
    detail: null, // 详情和修改传 1 ，新增和详情转修改传 2
    orderInv: null, // 第几个账单信息
  };

  componentDidMount() {
    this.perfectInvInfo();
  }

  // 获取完善信息详情
  perfectInvInfo = () => {
    const {
      dispatch,
      contIdList,
      isCustSupp,
      custSuppId,
      InvoiceId,
      costCenterIdList,
      formFieldsValue,
    } = this.props;

    // 费用明细;
    let param = {};
    if (isCustSupp === '1') {
      // 1是客户，2是供应商，3是签约方
      param = {
        applyType: isCustSupp, // 1是客户，2是供应商，3是签约方
        feeType: formFieldsValue.costType, // 是账单还是一次性
        custSuppId, // 客户或者签约方/供应商id
        invApplyIds: InvoiceId, // 账单id
        contId: contIdList[0], // 合同id
      };
      if (costCenterIdList.length) {
        // 成本中心如果没有的话不传
        param.billCostIds = costCenterIdList; // 成本中心id
      }
    } else if (isCustSupp === '2') {
      // 1是客户，2是供应商，3是签约方
      param = {
        applyType: isCustSupp, // 1是客户，2是供应商，3是签约方
        feeType: formFieldsValue.costType, // 是账单还是一次性
        custSuppId, // 客户或者签约方/供应商id
        invApplyIds: InvoiceId, // 账单id
        contId: contIdList[0], // 合同id
      };
    } else {
      // 1是客户，2是供应商，3是签约方
      param = {
        applyType: isCustSupp, // 1是客户，2是供应商，3是签约方
        feeType: formFieldsValue.costType, // 是账单还是一次性
        custSuppId, // 客户或者签约方/供应商id
        invApplyIds: InvoiceId, // 账单id
      };
    }
    dispatch({
      type: 'invbycustsupp/expensesDetail',
      payload: param,
    });
  };

  // 下一步
  nextFinish = () => {
    const {
      nextFinish,
      dispatch,
      InvoiceId,
      expensesData,
      contIdList,
      isCustSupp,
      custSuppId,
      formFieldsValue,
    } = this.props;
    if (!expensesData.invApplyDto || expensesData.invApplyDto.invApplyBillOptVo.length === 0) {
      // 是否有发票明细
      message.warning('请填写发票明细');
      return;
    }
    // *************
    // 未开票金额 和 合计金额作比较
    if (expensesData.amountNoInv > expensesData.billAmo) {
      message.warning('合计开票金额大于可开票金额，不可提交，请调整');
      return;
    }
    if (expensesData.amountNoInv !== 0 && expensesData.amountNoInv < expensesData.billAmo) {
      message.warning('合计开票金额小于可开票金额，不可提交，请调整');
      return;
    }
    // 所有的开票类型和钱
    const allInvItem = [];
    // othCost 服务费, agtsrvIns 社保, agtsrvAccu 公积金, agtsrvWage 代发工资, agtsrvArchv 代收档案费, agtsrvTax 代报税金额
    expensesData.invApplyDto.invApplyBillOptVo.map(item => {
      item.invTermMoney.map(items => {
        const temp = items;
        allInvItem.push(items);
        if (items.pdId === 'PDINF_0000000001') {
          temp.agtsrvIns = items.invAmount;
        }
        if (items.pdId === 'PDINF_0000000002') {
          temp.agtsrvAccu = items.invAmount;
        }
        if (items.pdId === 'PDINF_0000000003') {
          temp.agtsrvArchv = items.invAmount;
        }
        if (items.pdId === 'PDINF_0000000004') {
          temp.agtsrvWage = items.invAmount;
        }
        if (items.pdId === 'PDINF_0000000001') {
          temp.agtsrvIns = items.invAmount;
        }
        if (items.pdId === 'PDINF_0000000005') {
          temp.agtsrvTax = items.invAmount;
        }
      });
    });
    let othCostMoney = 0; // 服务费
    let agtsrvInsMoney = 0; // 社保
    let agtsrvAccuMoney = 0; // 公积金
    let agtsrvWageMoney = 0; // 代发工资
    let agtsrvArchvMoney = 0; // 代收档案费
    let agtsrvTaxMoney = 0; // 代报税金额
    // bilingType ： 1服务费，2 各产品的钱
    // 服务费把钱加起来，代收代付根据产品把钱合起来
    allInvItem.map(alitem => {
      if (alitem.bilingType === 1) {
        othCostMoney += alitem.invAmount;
      } else {
        if (alitem.agtsrvIns) {
          agtsrvInsMoney += alitem.invAmount;
        }
        if (alitem.agtsrvAccu) {
          agtsrvAccuMoney += alitem.invAmount;
        }
        if (alitem.agtsrvWage) {
          agtsrvWageMoney += alitem.invAmount;
        }
        if (alitem.agtsrvArchv) {
          agtsrvArchvMoney += alitem.invAmount;
        }
        if (alitem.agtsrvTax) {
          agtsrvTaxMoney += alitem.invAmount;
        }
      }
    });
    // 将合起来的钱  与  后台返的钱作比较
    if (expensesData.othCost < othCostMoney) {
      message.warning('服务费的合计开票金额大于可开票金额，不可提交，请调整');
      return;
    }
    if (expensesData.agtsrvIns < agtsrvInsMoney) {
      message.warning('代收社保的合计开票金额大于可开票金额，不可提交，请调整');
      return;
    }
    if (expensesData.agtsrvAccu < agtsrvAccuMoney) {
      message.warning('代收公积金的合计开票金额大于可开票金额，不可提交，请调整');
      return;
    }
    if (expensesData.agtsrvWage < agtsrvWageMoney) {
      message.warning('代发工资的合计开票金额大于可开票金额，不可提交，请调整');
      return;
    }
    if (expensesData.agtsrvArchv < agtsrvArchvMoney) {
      message.warning('代收档案费的合计开票金额大于可开票金额，不可提交，请调整');
      return;
    }
    if (expensesData.agtsrvTax < agtsrvTaxMoney) {
      message.warning('代报税金额的合计开票金额大于可开票金额，不可提交，请调整');
      return;
    }
    // *************

    // 提交到结果页
    dispatch({
      type: 'invbycustsupp/getFinishId',
      payload: {
        contId: contIdList[0], // 合同id
        custSuppId, // 客户或者签约方/供应商id
        invApplyIds: InvoiceId, // 账单id
        custSuppType: isCustSupp === '1' ? '1' : '2', // 类型 1客户，2供应商/签约方
        applyType: isCustSupp, // 那个开票1客户，2供应商，3签约方
        feeType: formFieldsValue.costType, // 是账单还是一次性
        invBill: {
          costAmount: expensesData.othCost || 0, // 服务费
          insAmount: expensesData.agtsrvIns || 0, // 社保
          accuAmount: expensesData.agtsrvAccu || 0, // 公积金
          wagesAmount: expensesData.agtsrvWage || 0, // 代发工资（元）
          archvAmount: expensesData.agtsrvArchv || 0, // 代收档案费（元）
          taxAmount: expensesData.agtsrvTax || 0, // 代报税金额（元）
        },
      },
    }).then(res => {
      if (res.success) {
        dispatch({
          type: 'invbycustsupp/getFinishData',
          payload: { invApplyId: res.data.invApplyId },
        }).then(response => {
          if (response && response.success) {
            nextFinish(response.data); // 成功后去完成页
          } else {
            message.warning(response.message || '服务端未知错误');
          }
        });
      } else {
        message.warning(res.message || '提交失败：服务端未知错误');
      }
    });
  };

  // 新增发票
  addInv = () => {
    this.setState(
      {
        invDetailType: 1,
        detail: 2,
      },
      () => {
        this.child.getDetail();
        this.handleModalVisible(1, true);
      }
    );
  };

  // 模态框显隐
  handleModalVisible = (modalState, flag) => {
    if (modalState === 3 || modalState === 4) {
      this.setState({
        invDetailType: 2,
        detail: 2,
      });
    } else {
      this.setState({
        visible: !!flag,
      });
    }
    if (!flag) {
      this.perfectInvInfo();
    }
  };

  // 删除发票
  deleteInv = record => {
    const { dispatch } = this.props;
    confirm({
      icon: <ExclamationCircleOutlined />,
      title: '删除后该发票信息不再显示',
      okText: '确定',
      cancelText: '取消',
      style: { top: 200 },
      onOk: () => {
        dispatch({
          type: 'invbycustsupp/deleteRecord',
          payload: {
            invCompany: { invCompanyId: record.invCompanyId },
            invRule: { invRuleId: record.invRuleId },
          },
        }).then(res => {
          if (res.success) {
            message.success('删除成功！');
          } else {
            message.success('删除失败！');
          }
          this.perfectInvInfo();
        });
      },
      onCancel: () => {},
    });
  };

  // 修改发票
  updateInv = (record, e, index) => {
    const detailParams = { invCompany: { invCompanyId: record.invCompanyId } };
    // const detailParams = { invCompany: { invCompanyId: 'IC_010000000040' } };
    this.setState(
      {
        invDetailType: 2,
        detail: e,
        detailParams,
        orderInv: index,
      },
      () => {
        this.child.getDetail();
      }
    );
    this.handleModalVisible(2, true);
  };

  // 未进账单
  onRef = ref => {
    this.child = ref;
  };

  // // 获取详情数据
  // getDetail = record => {
  //   const detailParams = { invCompany: { invCompanyId: record.invCompanyId } };
  //   this.setState({ visible: true, detailParams }, () => {
  //     this.child.getDetail();
  //   });
  // };

  // 获取详情数据
  getDetail = (record, index) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'invbycustsupp/updateModelData',
      payload: {
        recordData: record,
      },
    });
    const detailParams = { invCompany: { invCompanyId: record.invCompanyId } };
    this.setState(
      { visible: true, invDetailType: 3, detail: 1, detailParams, orderInv: index },
      () => {
        this.child.getDetail();
      }
    );
  };

  render() {
    const {
      currentStep,
      setCurrentstep,
      isCustSupp,
      preStep = () => {
        if (currentStep) {
          setCurrentstep(currentStep - 1);
        }
      },
      expensesData,
      loading,
      contIdList,
      custSuppId,
    } = this.props;
    const { provCityAreaList, visible, invDetailType, detail, detailParams, orderInv } = this.state;

    const columns = [
      {
        title: '序号',
        dataIndex: 'number',
        width: 100,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: text => (
          <p
            style={{
              margin: '16px 16px',
            }}
          >
            {text || '--'}
          </p>
        ),
      },
      {
        title: '成本中心',
        dataIndex: 'costIdName',
        width: 260,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: text => (
          <p
            style={{
              margin: '16px 16px',
            }}
          >
            {text || '--'}
          </p>
        ),
      },
      {
        title: '发票类型',
        dataIndex: 'invTypeName',
        width: 260,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: text => (
          <p
            style={{
              margin: '16px 16px',
            }}
          >
            {text || '--'}
          </p>
        ),
      },

      {
        title: '发票抬头',
        dataIndex: 'holderName',
        width: 260,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: text => (
          <p
            style={{
              margin: '16px 16px',
            }}
          >
            {text || '--'}
          </p>
        ),
      },

      {
        title: '开票项目',
        dataIndex: 'invTerm',
        width: 250,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: (text, record) => {
          if (record.invTerm && record.invTerm.length) {
            return (
              <div>
                {record.invTerm.map((item, index) => (
                  <div>
                    {index === 0 ? null : <Divider style={{ margin: 0, padding: 0 }} />}
                    <p
                      style={{
                        margin: index === 0 ? '20px 0 20px 0' : '15px 0 20px 0',
                        padding: '16px 16px',
                      }}
                    >
                      {item.invTermName || '--'}
                    </p>
                  </div>
                ))}
              </div>
            );
          }
          return (
            <p
              style={{
                margin: '16px 16px',
              }}
            >
              --
            </p>
          );
        },
      },
      {
        title: '金额',
        dataIndex: 'invTermMoney',
        width: 80,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'right',
          },
        }),
        render: (text, record) => {
          if (record.invTerm && record.invTerm.length) {
            return (
              <div>
                {record.invTerm.map((item, index) => (
                  <div>
                    {index === 0 ? null : <Divider style={{ margin: 0, padding: 0 }} />}
                    <p
                      style={{
                        margin: index === 0 ? '20px 0 20px 0' : '15px 0 20px 0',
                        padding: '16px 16px',
                      }}
                    >
                      {item.invAmount === 0 ? 0 : (item.invAmount && item.invAmount) || '--'}
                    </p>
                  </div>
                ))}
              </div>
            );
          }
          return (
            <p
              style={{
                margin: '16px 16px',
              }}
            >
              --
            </p>
          );
        },
      },

      {
        title: '交付方式',
        dataIndex: 'invPayName',
        width: 200,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: text => (
          <p
            style={{
              margin: '16px 16px',
            }}
          >
            {text || '--'}
          </p>
        ),
      },
      {
        title: '操作',
        // dataIndex: 'phone',
        width: '12%',
        align: 'center',
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        render: (text, record, index) => (
          <div
            style={{
              padding: '16px 16px',
            }}
          >
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.getDetail(record, index)}
            >
              查看
            </span>
            <Divider type="vertical" />
            <Dropdown
              overlay={
                <Menu>
                  <Menu.Item key="look" onClick={() => this.deleteInv(record)}>
                    删除
                  </Menu.Item>
                  <Menu.Item key="update" onClick={() => this.updateInv(record, 1, index)}>
                    修改
                  </Menu.Item>
                </Menu>
              }
            >
              <a>
                更多 <DownOutlined />
              </a>
            </Dropdown>
          </div>
        ),
      },
    ];

    const columns1 = [
      {
        title: '序号',
        dataIndex: 'number',
        width: 100,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: text => (
          <p
            style={{
              margin: '16px 16px',
            }}
          >
            {text || '--'}
          </p>
        ),
      },
      {
        title: '发票类型',
        dataIndex: 'invTypeName',
        width: 260,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: text => (
          <p
            style={{
              margin: '16px 16px',
            }}
          >
            {text || '--'}
          </p>
        ),
      },

      {
        title: '发票抬头',
        dataIndex: 'holderName',
        width: 260,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: text => (
          <p
            style={{
              margin: '16px 16px',
            }}
          >
            {text || '--'}
          </p>
        ),
      },

      {
        title: '开票项目',
        dataIndex: 'invTerm',
        width: 250,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: (text, record) => {
          if (record.invTerm && record.invTerm.length) {
            return (
              <div>
                {record.invTerm.map((item, index) => (
                  <div>
                    {index === 0 ? null : <Divider style={{ margin: 0, padding: 0 }} />}
                    <p
                      style={{
                        margin: index === 0 ? '20px 0 20px 0' : '15px 0 20px 0',
                        padding: '16px 16px',
                      }}
                    >
                      {item.invTermName || '--'}
                    </p>
                  </div>
                ))}
              </div>
            );
          }

          return (
            <p
              style={{
                margin: '16px 16px',
              }}
            >
              --
            </p>
          );
        },
      },
      {
        title: '金额',
        dataIndex: 'invTermMoney',
        width: 180,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'right',
          },
        }),
        render: (text, record) => {
          if (record.invTerm && record.invTerm.length) {
            return (
              <div>
                {record.invTerm.map((item, index) => (
                  <div>
                    {index === 0 ? null : <Divider style={{ margin: 0, padding: 0 }} />}
                    <p
                      style={{
                        margin: index === 0 ? '20px 0 20px 0' : '15px 0 20px 0',
                        padding: '16px 16px',
                      }}
                    >
                      {item.invAmount === 0 ? 0 : (item.invAmount && item.invAmount) || '--'}
                    </p>
                  </div>
                ))}
              </div>
            );
          }

          return (
            <p
              style={{
                margin: '16px 16px',
              }}
            >
              --
            </p>
          );
        },
      },

      {
        title: '交付方式',
        dataIndex: 'invPayName',
        width: 150,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: text => (
          <p
            style={{
              margin: '16px 16px',
            }}
          >
            {text || '--'}
          </p>
        ),
      },
      {
        title: '操作',
        // dataIndex: 'phone',
        width: '12%',
        align: 'center',
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        render: (text, record, index) => (
          <div
            style={{
              padding: '16px 16px',
            }}
          >
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.getDetail(record, index)}
            >
              查看
            </span>
            <Divider type="vertical" />
            <Dropdown
              overlay={
                <Menu>
                  <Menu.Item key="look" onClick={() => this.deleteInv(record)}>
                    删除
                  </Menu.Item>
                  <Menu.Item key="update" onClick={() => this.updateInv(record, 1, index)}>
                    修改
                  </Menu.Item>
                </Menu>
              }
            >
              <a>
                更多 <DownOutlined />
              </a>
            </Dropdown>
          </div>
        ),
      },
    ];
    return (
      <Spin spinning={loading}>
        <Card title={<span>费用明细</span>} style={{ margin: '20px 0 0 0' }}>
          {isCustSupp === '3' ? (
            <DescriptionList>
              <Description term="签约方">{expensesData.custName || '--'}</Description>
              <Description term="服务类型">{expensesData.serTypeName || '--'}</Description>
              <Description term="是否全额计税">{expensesData.fullyFlagName || '--'}</Description>
            </DescriptionList>
          ) : (
            <DescriptionList>
              <Description term="客户/供应商名称">{expensesData.custName || '--'}</Description>
              <Description term="合同名称">{expensesData.contName || '--'}</Description>
              <Description term="服务类型">{expensesData.serTypeName || '--'}</Description>
              <Description term="是否全额计税">{expensesData.fullyFlagName || '--'}</Description>
            </DescriptionList>
          )}
          <Divider dashed />
          <DescriptionList>
            <Description term="服务费（元）">
              {expensesData.othCost === 0
                ? 0
                : (expensesData.othCost && expensesData.othCost) || '--'}
            </Description>
            <Description term="代收社保（元）">
              {expensesData.agtsrvIns === 0
                ? 0
                : (expensesData.agtsrvIns && expensesData.agtsrvIns) || '--'}
            </Description>
            <Description term="代收公积金（元）">
              {expensesData.agtsrvAccu === 0
                ? 0
                : (expensesData.agtsrvAccu && expensesData.agtsrvAccu) || '--'}
            </Description>
            <Description term="代发工资（元）">
              {expensesData.agtsrvWage === 0
                ? 0
                : (expensesData.agtsrvWage && expensesData.agtsrvWage) || '--'}
            </Description>
            <Description term="代收档案费（元）">
              {expensesData.agtsrvArchv === 0
                ? 0
                : (expensesData.agtsrvArchv && expensesData.agtsrvArchv) || '--'}
            </Description>
            <Description term="代报税金额（元）">
              {expensesData.agtsrvTax === 0
                ? 0
                : (expensesData.agtsrvTax && expensesData.agtsrvTax) || '--'}
            </Description>
            <Description term="代收代付合计（元）">
              {expensesData.wageAmo === 0
                ? 0
                : (expensesData.wageAmo && expensesData.wageAmo) || '--'}
            </Description>
            <Description term="合计金额（元）">
              {expensesData.billAmo === 0
                ? 0
                : (expensesData.billAmo && expensesData.billAmo) || '--'}
            </Description>
          </DescriptionList>
        </Card>

        <Card
          title={
            <span>
              发票明细
              <a
                style={{
                  position: 'absolute',
                  right: 0,
                  fontStyle: 'normal',
                  fontWeight: 'normal',
                }}
                onClick={() => this.addInv()}
              >
                新增发票
              </a>
            </span>
          }
        />
        <Alert
          style={{ margin: '-50px 0 15px 0' }}
          message={
            <div>
              合计开票金额（元）：
              <span style={{ color: '#088FEA' }}>
                {(expensesData &&
                  expensesData.invApplyDto &&
                  expensesData.invApplyDto.invMoney &&
                  expensesData.invApplyDto.invMoney.toFixed(2)) ||
                  0}
              </span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 未开票金额：
              <span style={{ color: '#088FEA' }}>
                {(expensesData &&
                  expensesData.amountNoInv &&
                  expensesData.amountNoInv.toFixed(2)) ||
                  0}
              </span>
            </div>
          }
          type="info"
          showIcon
        />
        <Table
          rowKey={(record, index) => record.number || index}
          columns={isCustSupp === '1' ? columns : columns1}
          dataSource={
            expensesData && expensesData.invApplyDto && expensesData.invApplyDto.invApplyBillOptVo
          }
          // dataSource={data && data.invApplyDto && data.invApplyDto.invApplyBillOptVo}
          bordered
          pagination={false}
          className={styles.invRowPadding}
        />

        <AddDetailUpdateInv
          maskClosable={false} // 点击其他地方允不允许关闭
          visible={visible} // 控制显示隐藏
          handleModalVisible={this.handleModalVisible}
          addOrDetail={invDetailType} // 是新增还是修改还是详情（1新增，2修改，3自己详情，4小兰详情）
          detailUpdate={1} // 详情里有没有修改按钮（1有，2没有）
          provCityAreaList={provCityAreaList} // 修改时的邮寄地址的下拉选项
          style={{ width: 1200 }}
          detail={detail} // 详情和修改传 1 ，新增和详情转修改传 2
          detailParams={detailParams} // 详情的id
          contIdList={contIdList} // 合同id
          isCustSupp={isCustSupp} // 1是客户， 2是供应商， 3是签约方
          custSuppId={custSuppId} // 客户或者供应商/签约方id
          amountNoInv={expensesData.amountNoInv} // 还能开票的钱
          orderInv={orderInv} // 修改的时候传
          onRef={this.onRef}
        />

        {/* <AddDetailUpdateInv
          maskClosable={false} // 点击其他地方允不允许关闭
          visible={visible} // 控制显示隐藏
          handleModalVisible={this.handleModalVisible}
          addOrDetail={4} // 是新增还是修改还是详情（1新增，2修改，3自己详情，4小兰详情）
          detailUpdate={2} // 详情里有没有修改按钮（1有，2没有）
          style={{ width: 1200 }}
          detail={1} // 详情和修改传 1 ，新增和详情转修改传 2
          detailParams={detailParams} // 传过去的详情id
          onRef={this.onRef}
        /> */}

        <div style={{ textAlign: 'center' }}>
          <Button onClick={() => preStep()} style={{ margin: '24px 20px 0 0' }}>
            取消
          </Button>
          <Button type="primary" onClick={this.nextFinish}>
            提交
          </Button>
        </div>
      </Spin>
    );
  }
}
export default BillingList;
